﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>模仿angular.js双向绑定的DEMO2</title>

    <script src="../../Scripts/jquery-1.11.1.js"></script>
    <script src="../../Scripts/ejq.js"></script>
    <script>
      
        $(function () {


            //申明模版引擎的作用域
            var model = $ejqApp.module("ng-app");
            //控制器操作
            model.controller("ctr1", function ($scope, $http, $con, $app, $tool, $event) {

                $scope.model = {
                    title: "哈哈",
                    list: [{ id: 1, name: "table1" }, { id: 2, name: "table2" }, { id: 3, name: "table3" }],
                    item: [{ id: 3, name: "table3" }, { id: 2, name: "table2" }, { id: 1, name: "table1" }],
                    id: 1
                };
                $scope.haha = { text: "haha " };


                //使用ajax
                $http.jsonList = {
                    url:"json.json",//随机URL
                    type: "get",
                };
               
                //获取当前控制器
                var thObj = $con.getObj();
                //获取当前App
                var appObj = $app.getObj();


                //给当前控制器name注册事件实现双向绑定
                appObj.on("click", thObj.find("#name"), function () {
                    

                    //更新model.Title
                    $scope.model.title ="哈哈"+ $.random.getNumBetweenLength(8, 10);


                    //更换AJAX URL
                    if ($http.jsonList.url == "json.json") {
                        $http.jsonList.url = "jsonList.json";
                    } else {
                        $http.jsonList.url = "json.json";
                    }

                    //重新绑定
                    $ejqApp.apps.bind()

                    alert("数据重新绑定成功")
                })


            })
            $ejqApp.apps.bind();
        })



    </script>


    <meta charset="utf-8" />
</head>
<body ng-app="ng-app">
    <h1>
        模仿angular.js双向绑定的DEMO
    </h1>
    <div ng-controller="ctr1">
        <input id="name" type="button" value="Reset" />
        <div>
            <h1>$scope.model</h1>
            {{model.title}}
            {{model.id}}
            <table ng-repeat="item in  model.list">
                <tr><td>{{item.id}}</td><td>{{item.name}}</td></tr>

            </table>
            <table ng-repeat="item in  model.item">
                <tr><td>{{item.id}}</td><td>{{item.name}}</td></tr>

            </table>
        </div>
        <h1>$scope.haha</h1>
        {{haha.text}}

        <h3>异步加载</h3>
        <table ng-repeat="item in  jsonList">
            <tr><td>{{item.desc}}</td><td>{{item.name}}</td></tr>

        </table>

    </div>

</body>
</html>
